<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>resources/jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>resources/jquery/themes/icon.css">
<script type="text/javascript"
	src="<%=basePath%>resources/jquery/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>resources/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>resources/jquery/locale/easyui-lang-zh_CN.js"></script>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="<%=basePath%>/resources/vue.min.js"></script>
</head>


<body>


<div id="app">
  <p >{{ message }}</p>
</div>

<div id="app-2">
  <span v-bind:title="message">
  鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>

<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! 666'
  }
})


var app2 = new Vue({
	  el: '#app-2',
	  data: {
	message: '页面加载于 ' + new Date().toLocaleString() }
	})
	
	
var app3 = new Vue({
	  el: '#app-3',
	  data: {
	seen: true }
	})


</script>



	<h1>
		<a href="/siyuan/logout.shtml">退出</a>
	</h1>
	
	<h1>
		<a href="/siyuan/home.shtml">HOME</a>
	</h1>

	<h2>${msg }</h2>
	
	<form action="/siyuan/book_class.shtml" method="get" >

		<p>
			教室：
			<select name="classid">
				<option value="1">第1教室</option>
				<option value="2">第2教室</option>
			</select> 
		</p>
		
		<p>
			使用周：
  <select name="weekday"  id="selectId"></select>
        <script>
            let mydate=new Date();
            let myddy=mydate.getDay();//获取存储当前日期
            let selectDom=document.getElementById('selectId')
            let weekday=["周日","周一","周二","周三","周四","周五","周六"];
            selectDom.innerHTML=''
            switch (myddy) {
                case 0:
                weekday=["周一","周二","周三","周四","周五"];
                    break;
                case 1:
                weekday=["周一","周二","周三","周四","周五"];
                break;
                case 2:
                weekday=["周二","周三","周四","周五"];
                break;
                case 3:
                weekday=["周三","周四","周五"];
                break;
                case 4:
                weekday=["周四","周五"];
                break;
                case 5:
                weekday=["周五"];
                break;
                case 6:
                weekday=["周一","周二","周三","周四","周五"];
                break;
                default:
                break;
            }
            for (let i = 0; i < weekday.length; i++) {
                let html=selectDom.innerHTML
                let myDate=new Date();
                var milliseconds=myDate.getTime()+1000*60*60*24*i;
                var newMyDate = new Date(milliseconds);
                var year = newMyDate.getFullYear();//获取当前年
                var month = newMyDate.getMonth()+1;//获取当前月
                var day = newMyDate.getDate();//获取当前日
                selectDom.innerHTML=html+"<option value ="+weekday[i]+">"+year+'年'+month+'月'+day+'日'+"</option>"
            }
        </script>
		</p>
		<p>
			使用时间段：
			<select name="time">
				<option value="8">08:00</option>
				<option value="9">09:00</option>
				<option value="10">10:00</option>
				<option value="11">11:00</option>
				<option value="12">12:00</option>
				<option value="13">13:00</option>
				<option value="14">14:00</option>
				<option value="15">15:00</option>
				<option value="16">16:00</option>
				<option value="17">17:00</option>
				<option value="18">18:00</option>
			</select> 
		</p>
		
		<p>
		用途:
			<input type="text"  name="classUse">
		</p>

		<p>
			<input type="submit" value="提交申请">
		</p>
	</form>

<h1>user教室申请</h1>

<table id="dg" title="user_classroom" class="easyui-datagrid" style="width:500px;height:300px"
		url="/siyuan/user_bookings.shtml"
		toolbar="#toolbar">
	<thead>
		<tr>
			<th field="id" width="25">id</th>
			<th field="classUse" width="150">classUse</th>
			<th field="classid" width="50">classid</th>
			<th field="pass" width="50">pass</th>
			<th field="time" width="50">time</th>
			<th field="userid" width="50">userid</th>
			<th field="username" width="50">username</th>
			<th field="weekday" width="75">weekday</th>
		</tr>
	</thead>
</table>

<div id="toolbar">
	<a  class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="destroyUser()">取消预定</a>
</div>

<script type="text/javascript">
function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','确定取消预约?',function(r){
            if (r){
                $.post('/siyuan/delete_booking.shtml',{id:row.id},function(result){
                    if (result = eval('1')){
                        $('#dg').datagrid('reload');    // reload the user data
                    } else {
                        $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
        });
    }
}



</script>

<div id="myDiv"><h2>使用 AJAX查看</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>


<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/siyuan/user_bookings.shtml",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>


</body>
</html>